<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Folder tree with Drag and Drop capabilities</title>
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)">
<meta name="Generator" content="Alf Magne Kalleland (www.dhtmlgoodies.com)">
<meta name="KeyWords" content="Ajax scripts,Ajax tutorials,Free DHTML scripts,Tab menu,Slide menu, Slide out menu,XP widget,DHTML, HTML, Dynamic HTML,DHTML Calendar,Dhtml Menu,Drag and drop, Drag, Drop,dhtml slideshow,Library, Javascript">
<meta name="Description" content="Click here for DHTMLgoodies.com, a site with DHTML and Ajax scripts, demos and tutorials.">
<meta name="country" content="Norway">
<meta name="organization-Email" content="post@dhtmlgoodies.com">
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland">
<meta name="coverage" content="Worldwide">
<meta name="revisit_after" content="30days">
<meta name="title" content="A library of DHTML and AJAX scripts - DHTMLgoodies.com">
<meta name="identifier" content="http://www.dhtmlgoodies.com/">
<meta name="language" content="English">
<meta name="robots" content="follow">
<meta name="googlebot" content="index, follow">
<link rel="stylesheet" href="index_files/dhtmlgoodies.css" media="screen" type="text/css">
<link rel="stylesheet" href="index_files/print.css" media="print" type="text/css">

</head><body>
<div id="pageContainer">
<div id="mainContainer">


		
	<div id="ad">

	</div>
	<div id="siteSearch">
		<form action="/index.html" method="post">
			<table>
				<tbody><tr>
					<td><input name="search_query" class="searchField" value="" type="text"></td>
					<td><input name="search" value="Search" class="searchButton" type="submit"></td>
				</tr>
			</tbody></table>
		</form>
	</div>
	<div id="header"><a href="http://www.dhtmlgoodies.com/index.html"><img src="index_files/heading3.gif" alt="DHTMLgoodies.com - A library of nice looking DHTML(dynamic HTML) scripts.
 (css + html + javascript = DHTML = true)"></a></div>
	<div id="leftMenu">
		<ul>					
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=menuScripts">Menu scripts</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=windowScript">Window scripts</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=calendarScripts">Calendar scripts</a></li>				
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=galleryScripts">Gallery scripts</a></li>		
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=formWidgets">Form widgets</a></li>		
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=xpWidgets">XP widgets</a></li>		
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=tableWidgets">Table widgets</a></li>		
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=dragDrop">Drag and drop</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=folderTree">Folder trees</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=tooltip">Tooltips</a></li>			
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=ajax">AJAX scripts</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=smallscripts">Misc scripts</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=forfun">Javascript games</a></li>			
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=chess">Chess widgets</a>  <img src="index_files/menu_new.gif"></li>		
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=dhtml-suite">DHTML Suite</a></li>	
		</ul>
		<ul>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=tutorials">Tutorials</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=tipsAndTricks">Tips and Tricks</a></li>
			<li><a href="http://www.dhtmlgoodies.com/scripts/color-schemer/color-schemer.html">Color schemer</a></li>	
			<li><a href="http://www.dhtmlgoodies.com/scripts/color-schemer-v2/color-schemer-v2.html" onclick="var colorWin = window.open(this.href);return false">Color schemer II</a></li>	
			<li><a href="http://www.dhtmlgoodies.com/scripts/regular-expression/regular-expression.html" onclick="var colorWin = window.open(this.href);return false">Regex tool</a></li>	
			<li><a href="http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup.html" onclick="var cssLookupWin = window.open(this.href);return false">CSS lookup</a></li>	
			<li><a href="http://www.realmetrics.com/b/6412839473241242">Hosting Reviews</a></li>
		</ul>
		<ul>
			<li><a href="http://www.dhtmlgoodies.com/forum/" title="Need help? Ask a question at my forum">Forum</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=termsOfUse">Terms of use</a></li>			
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=linkToUs">Link to us</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=rss">RSS feed <img src="index_files/rss.gif"></a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=advertise">Advertise</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=donate">Donate</a></li>

		</ul>
				<ul>
			<li><b>Top sponsors</b></li>
			<li><a href="http://www.metis.net/" onclick="var spWin=window.open(this.href);return false">Metis.net</a></li>			
			<li><a href="http://www.myeasyinvoice.com/" onclick="var spWin=window.open(this.href);return false">myeasyinvoice.com</a></li>
			<li><a href="http://www.echopanel.com/?mtc=LK_120" onclick="var spWin=window.open(this.href);return false">echoPANEL.com</a></li>
			<li><a style="font-size: 0.9em; color: rgb(255, 0, 0);" href="http://www.dhtmlgoodies.com/index.html?page=dhtml-suite#dhtmlSuiteSponsors">More</a></li>
		</ul>		
		<ul>
			<li><b>Resources</b></li>			
			<li><a href="http://www.expertsrt.net/" onclick="var linkWin = window.open(this.href);return false">Experts Round Table</a></li>
			<li><a href="http://www.cbolson.com/tests/" onclick="var linkWin = window.open(this.href);return false">cbolson.com - Demos</a></li>
			<li><a href="http://www.hotscripts.com/?RID=N415224" onclick="var linkWin = window.open(this.href);return false">HotScripts</a></li>
			<li><a href="http://www.scriptsearch.com/" onclick="var linkWin = window.open(this.href);return false">ScriptSearch.com</a></li>			
			<li><a href="http://www.vision.to/" onclick="var linkWin = window.open(this.href);return false">Vision.To Design</a></li>
			<li><a href="http://www.dhtmlgoodies.com/index.html?page=resources">Other resources</a></li>
		</ul>
			<ul>
		<li><b>Top referers</b></li>		
		<li><a href="http://www.google.com/" onclick="var linkWin = window.open(this.href);return false">Google</a></li>		
		<li><a href="http://www.noupe.com/" onclick="var linkWin = window.open(this.href);return false">noupe.com</a></li>	
		<li><a href="http://www.miniajax.com/" onclick="var linkWin = window.open(this.href);return false">miniajax.com</a></li>	
		<li><a href="http://www.hotscripts.com/" onclick="var linkWin = window.open(this.href);return false">hotscripts.com</a></li>	
		<li><a href="http://www.smashingmagazine.com/" onclick="var linkWin = window.open(this.href);return false">smashingmagazine.com</a></li>	
	</ul>	</div>	
	<div id="mainContent">
			<!-- This unit is hidden on your page, and will only display to your US search engine traffic (and certain other traffic). To preview, paste the code up on your site, then add #chitikatest=mortgage to the end of your URL in your browser's address bar.  Example:  www.yourwebsite.com#chitikatest=mortgage. This will show you what the ad would look like to a user who is interested in "mortgages." -->
	<div style="width: 470px; padding-left: 20px; padding-top: 5px;">
	<script type="text/javascript"><!--
	ch_client = "batalf";
	ch_alternate_ad_url = "http://www.dhtmlgoodies.com/config/alternative_ad.html";
	ch_type = "mpu";
	ch_width = 468;
	ch_height = 60;
	ch_non_contextual = 4;
	ch_vertical ="premium";
	ch_default_category = "200001";
	ch_sid = "Chitika Premium";
	var ch_queries = new Array( "javascript", "dhtml", "ipod", "software development", "website design", "Web design templates" );
	var ch_selected=Math.floor((Math.random()*ch_queries.length));
	if ( ch_selected < ch_queries.length ) {
	ch_query = ch_queries[ch_selected];
	}
	//--></script>
	<script src="index_files/amm.js" type="text/javascript">
	</script><iframe id="ch_ad869" name="ch_ad869" src="index_files/minimall.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" width="468" frameborder="0" height="60"></iframe>
	</div>
	<h1>Download drag'n drop folder tree</h1>
<p class="article_links">
	<a href="http://www.dhtmlgoodies.com/scripts/drag-drop-folder-tree/drag-drop-folder-tree.html" onclick="var scriptWin = window.open(this.href,'drag_drop_folder_tree');scriptWin.focus();return false">Demo</a> 
</p>
<h2>Download files</h2>
<p>You can download the entire script from this <a href="http://www.dhtmlgoodies.com/scripts/drag-drop-folder-tree/drag-drop-folder-tree.zip">Zip file</a>.</p>
<h4>Files included in the package:</h4>
<ul>
	<li>drag-drop-folder-tree.html = Main html file</li>
	<li>js/drag-drop-folder-tree.js = Main <a id="KonaLink0" target="_top" class="kLink" style="text-decoration: underline ! important; position: static;" href="#"><font style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;" color="blue"><span class="kLink" style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;">Javascript </span><span class="kLink" style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;">file</span></font></a></li>
	<li>js/context-menu.js = JS code for the context menu</li>
	<li>js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack). Used for the save method.</li>
	<li>saveNodes.php = Saving nodes. You need to configure this file, i.e. database connection and query.</li>
	<li>folderTree_updateItem.php = Rename or delete an item on the <a id="KonaLink1" target="_top" class="kLink" style="text-decoration: underline ! important; position: static;" href="#"><font style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;" color="blue"><span class="kLink" style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;">server</span></font></a>. This file is called by ajax.</li>
	<li>images/* = Images used by the script</li>
	<li>css/drag-drop-folder-tree.css = <a id="KonaLink2" target="_top" class="kLink" style="text-decoration: underline ! important; position: static;" href="#"><font style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;" color="blue"><span class="kLink" style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;">CSS </span><span class="kLink" style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;">file</span></font></a> used by the script</li>
	<li>css/context-menu.css = CSS file used by the context-menu</li>
</ul>
<h2>Configuration</h2>
<h4>Define the tree</h4>
<p>The tree is created by a standard &lt;UL&gt;&lt;LI&gt; list as in drag-drop-foler-tree.html. </p>
<p>Notice that you have three attributes available which you could assign to your &lt;LI&gt; tags. </p>
<ul>
	<li>noDrag - If you set this to "true", it means that this list item won't be dragable.</li>
	<li>noChildren -  When this attribute is set to true, it won't be possible to move items to this node.</li>
	<li>noSiblings
= It is not possible to add items above or below this node, only
children.(This is an attribute you typically use only on a root node).</li>
	<li>noDelete = It is not possible to delete this node.</li>
	<li>noRename = It is not possible to rename this node.</li>
</ul>
<h4>Creating tree object</h4>
<p>Below the HTML of your tree, you create a tree object like this:</p>
<p>
<span class="inline_code">
&lt;script type="text/javascript"&gt;	<br>
treeObj = new JSDragDropTree();<br>
treeObj.setTreeId('dhtmlgoodies_tree2');<br>
treeObj.setMaximumDepth(5);<br>
treeObj.setMessageMaximumDepthReached('Maximum depth reached');<br>
treeObj.initTree();<br>
&lt;/script&gt;<br>
</span>
</p>
<p>First, you create the tree object, then you define the id of your
tree, i.e. the id of the top &lt;UL&gt;(example: &lt;ul
id="dhtmlgoodies_tree2"...).</p>
<p>The following methods until initTree() are optional. See description of available methods below.</p>
<h2>Methods</h2>
<p>the JSDragDropTree class has the following methods:</p>
<ul>
	<li><b>setMaximumDepth</b> = Setting maximum depth of tree.
Dropping of nodes would be cancelled automatically if the depth exceeds
this number. Instead it would move the dragged nodes back to it's
original location. Default value is 6.</li>
	<li><b>setMessageMaximumDepthReached</b> = Message to the user when he drop nodes and depth exceeds defined maximum depth.</li>
	<li><b>setImageFolder</b> = Specify path to images. Default is "images/".</li>
	<li><b>setFolderImage</b> = Specify name of folder image, example: "dhtmlgoodies_folder.gif"</li>
	<li><b>setPlusImage</b> = Specify name of small [+] image</li>
	<li><b>setMinusImage</b> = Specify name of small [-] image</li>
	<li><b>setTreeId</b> = Specify id of tree</li>
	<li><b>expandAll</b> = Expand all nodes - must be called after initTree()</li>
	<li><b>collapseAll</b> = Collapse all nodes - must be called after initTree()</li>
	<li><b>getNodeOrders</b> = Returns the order of the nodes in the tree in the format id-parentID,id-parentID,id-parentID</li>
	<li><b>setFileNameRename</b>
= Specify name of file to call after a node has been renamed. Variables
to this file will be "renameId" and "newName". Default file is
"folderTree_updateItem.php"</li>
	<li><b>setFileNameDelete</b> =
Specify name of file to call after a node has been deleted. Variables
to this file will be "deleteIds" which is a commaseparated list of ids
for the deleted nodes. Default file is "folderTree_updateItem.php"</li>
	<li><b>setRenameAllowed</b>
= Enable or disable rename of nodes. This variable is default set to
true. Set it to false if you don't want to allow any nodes to be
renamed.</li>
	<li><b>setDeleteAllowed</b> = Specify if it's possible
to delete nodes in the tree. This variable is default set to true. Set
it to false if you don't want to allow any nodes to be deleted.</li>
	<li><b>additionalRenameRequestParameters</b> = Add parameters sent to the Ajax rename request. Argument to this methods should be an associative array. Example:
	<br>
	<b style="font-family: 'Courier New';"><i>tree.setAdditionalRenameRequestParameters({<br>
	name: "treeAction",<br>
	command: "renameNode"<br>
	});</i></b><br>
	which will add the variables name and command to the request sent to the server when an item is being renamed.	
	</li><li><b>setAdditionalDeleteRequestParameters</b> = Add parameters sent to the Ajax delete request. Argument to this methods should be an associative array. Example:
	<br>
<b style="font-family: 'Courier New';"><i>tree.setAdditionalRenameRequestParameters({<br>
	name: "treeAction",<br>
	command: "deleteNode"<br>
	});</i><br></b>
	which will add the variables name and command to the request sent to the server when an item is being deleted.
</li>
</ul>
<h2>Save a tree</h2>
<p>When you want to save the changes you made, you need to create your
own save function. Here's an example how it is done in the
demo(drag-drop-folder-tree.html):</p>
<p>
<span class="inline_code">
//--------------------------------<br>
// Save functions<br>
//--------------------------------<br>
var ajaxObjects = new Array();<br>
<br>
function saveMyTree()<br>
{<br>
&nbsp;&nbsp;&nbsp;&nbsp;saveString = treeObj.getNodeOrders();<br>
&nbsp;&nbsp;&nbsp;&nbsp;var ajaxIndex = ajaxObjects.length;<br>
&nbsp;&nbsp;&nbsp;&nbsp;ajaxObjects[ajaxIndex] = new sack();<br>
&nbsp;&nbsp;&nbsp;&nbsp;var url = 'saveNodes.php?saveString=' + saveString;<br>
&nbsp;&nbsp;&nbsp;&nbsp;ajaxObjects[ajaxIndex].requestFile = url;&nbsp;&nbsp;// Specifying which file to get<br>
&nbsp;&nbsp;&nbsp;&nbsp;ajaxObjects[ajaxIndex].onCompletion =
function() { saveComplete(ajaxIndex); } ;&nbsp;&nbsp;// Specify
function that will be executed after file has been found<br>
&nbsp;&nbsp;&nbsp;&nbsp;ajaxObjects[ajaxIndex].runAJAX();&nbsp;&nbsp;&nbsp;&nbsp;//
Execute AJAX function&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;<br>
}<br>
function saveComplete(index)<br>
{<br>
&nbsp;&nbsp;alert(ajaxObjects[index].response);&nbsp;&nbsp;<br>
&nbsp;&nbsp;<br>
}
</span>
</p>
<p>This will send the nodes to the server by use of Ajax.</p>
<p>You may also use a plain form when you submit the <a id="KonaLink3" target="_top" class="kLink" style="text-decoration: underline ! important; position: static;" href="#"><font style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;" color="blue"><span class="kLink" style="color: blue ! important; font-family: Trebuchet MS,Lucida Sans Unicode,Arial,sans-serif; font-weight: 400; font-size: 14.4px; position: static;">data</span></font></a>. Then the saveMyTree function could look something like this:</p>
<p><span class="inline_code">
function saveMyTree_byForm()<br>
{<br>
&nbsp;&nbsp;document.myForm.elements['saveString'].value = treeObj.getNodeOrders();<br>
&nbsp;&nbsp;document.myForm.submit();&nbsp;&nbsp;&nbsp;&nbsp;<br>
}
</span>
</p>
<h2>Update log</h2>
<ul>
	<li>Nov, 10th, 2006: Added delete and rename features</li>
</ul>		
	</div>
	<div class="clear"></div>
	
</div>
<div id="sponsorContainer">
		<!--<a href="http://www.mailchimp.com/resources/dg_email_design.phtml?c1=banner&source=dhtmlgoodies&kw=techies" onclick="var linkWin = window.open(this.href);return false"><img border="0" alt="" title="" src="images/mailchimp_html_email.jpg"/></a><br>-->
		<!--<a href="http://www.hostgator.com/" title="HostGator - Providing Reseller Web Hosting and Dedicated Servers" onclick="var linkWin = window.open(this.href);return false"><img border="0" alt="HostGator - Providing Reseller Web Hosting and Dedicated Servers" src="images/hostgator.gif"/></a><br>-->
		<!--<a href="index.html?page=advertise"><img border="0" alt="" title="" src="/images/forum-ad.gif"/></a><br>-->
		<!--<a href="http://www.virtuosonetsolutions.com/adwatcher/tracker.php?t=122" title="Virtuoso Net Solutions" onclick="var linkWin = window.open(this.href);return false"><img border="0" alt="Virtuoso Net Solutions" src="images/virtuoso.gif"/></a><br>-->
				
		<a href="http://www.dhtmlgoodies.com/index.html?page=advertise"><img alt="" title="" src="index_files/forum-ad.gif" border="0"></a><br>
		<a href="http://www.cbolson.com/" onclick="var linkWin = window.open(this.href);return false"><img alt="" title="" src="index_files/cbolson_120x60.jpg" border="0"></a><br>

		
		<br>
			<div style="width: 160px; padding-left: 2px; padding-right: 2px;">
	<script type="text/javascript"><!--
	ch_client = "batalf";
	ch_width = 160;
	ch_height = 160;
	ch_color_title = "333333";
	ch_non_contextual = 1;
	ch_default_category = "200001";
	var ch_queries = new Array( "javascript","dhtml","ipod","software development","website design","Web design templates" );
	var ch_selected=Math.floor((Math.random()*ch_queries.length));
	if ( ch_selected < ch_queries.length ) {
	ch_query = ch_queries[ch_selected];
	}
	//--></script>
	<script src="index_files/mm.js" type="text/javascript">
	</script><iframe name="ch_ad815" src="index_files/minimall_002.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" width="160" frameborder="0" height="160"></iframe>
	</div>
	
			<br>
		<br>
				</div>
		<div class="clear"></div>
<div id="signature">
		<div>
			<a href="http://www.dhtmlgoodies.com/index.html?page=contact">About/Contact</a> | <a href="http://www.dhtmlgoodies.com/index.html?page=goodIdea">A good idea?</a> | <a href="http://www.dhtmlgoodies.com/index.html?page=submit">Submit a script</a> | <a href="http://www.dhtmlgoodies.com/index.html?page=privacy">Privacy notice</a>
			<br>
			
© 2005 - 2008 <a href="http://www.dhtmlgoodies.com/">dhtmlgoodies.com</a> | <a href="mailto:post@dhtmlgoodies.com">post@dhtmlgoodies.com</a></div></div>

</div>

<!-- Kontera ContentLink�  -->
<script language="JavaScript">
var dc_UnitID = 14;
var dc_PublisherID = 3695;
var dc_AdLinkColor = 'blue';
var dc_adprod='ADL';
</script>
<script language="JavaScript" src="index_files/KonaLibInline.js"></script><script language="JavaScript" src="index_files/generatedAbTesting"></script><script language="JavaScript" src="index_files/generatedPublisherConfig.js"></script><script language="JavaScript" src="index_files/generatedNetworkTraffic.js"></script><script language="JavaScript" src="index_files/KonaLibBaseRM.js"></script><script language="JavaScript" src="index_files/KonteraDebugger.js"></script><a id="AdLinkLayerClick" target="_top" href="#"></a><input id="KonaImpression" style="width: 0px; height: 0px; visibility: hidden; display: none;" type="image"><input id="KonaImpression1" style="width: 0px; height: 0px; visibility: hidden; display: none;" type="image"><iframe allowtransparency="true" src="" vspace="0" hspace="0" marginheight="0" marginwidth="0" style="width: 1px; height: 1px; background-color: transparent;" id="caterpilarID" name="caterpilarID" scrolling="no" frameborder="0"></iframe><span><script type="text/javascript" src="index_files/KonaLib_TreeCoreRM.js"></script></span><span><script type="text/javascript" src="index_files/MS_KonaBuilder.js"></script></span><span><script type="text/javascript" src="index_files/newExpandKonaBuilder.js"></script></span><style id="konaStyle" type="text/css">
 span.kLink { border-top: 0px none !important;border-left: 0px none !important;border-right: 0px none !important;border-bottom:  1px solid  ;padding : 0px 0px 1px 0px !important;color:blue;background: transparent none;width: auto !important;float: none !important;display:inline !important; } 
 a.kLink { color:blue !important ; border-bottom-style: none;text-decoration: underline;cursor: pointer;font-family: verdana;border: 0px none transparent !important;background: transparent none !important;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px !important;text-transform: none !important;display:inline !important;font-variant:normal;top:0px; right:0px;bottom:0px;left:0px; } 
 a.kLink:link { color:blue !important ; border-bottom-style: none;text-decoration: underline;cursor: pointer;font-family: verdana;border: 0px none transparent !important;background: transparent none !important;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px !important;text-transform: none !important;display:inline !important;font-variant:normal;top:0px; right:0px;bottom:0px;left:0px; } 
 a.kLink:hover { color:blue;text-decoration: underline;cursor: pointer;font-family: verdana;border: 0px none transparent !important;background: transparent none !important;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px !important;text-transform: none !important;display:inline !important;font-variant:normal;top:0px; right:0px;bottom:0px;left:0px; } 
 a.kLink:visited { color:blue;text-decoration: underline;cursor: pointer; font-family: verdana;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px; } 
 .sponsor { font-family: MS Sans Serif, Verdana; color: #AFAFAF;font-size: 9pt; cursor: default; } 
 .konaLayers { azimuth:center;border-collapse:separate;border-spacing:0;caption-side:top;cursor:auto;direction:ltr;elevation:level;empty-cells:show;font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;orphans:2;page-break-inside:auto;pitch-range:50;pitch:medium;position:static;richness:50;right:auto;speak-header:once;speak-numeral:continuous;speak:normal;speech-rate:medium;stress:50;text-align:left;text-indent:0;text-transform:none;visibility:visible;volume:medium;white-space:normal;widows:2;word-spacing:normal; } 
 .konaLayers * { background-attachment:scroll;background-color:transparent;background-image:none;background-position:0% 0%;background-repeat:repeat;border-style: none none none none;border-width: medium medium medium medium;clear:none;color:inherit;content:normal;counter-increment:none;counter-reset:none;cue-after:none;cue-before:none;float:none;left:auto;letter-spacing:normal;margin: 0px 0px 0px 0px;max-height:none;max-width:none;min-height:0;min-width:0;outline-color:invert;outline-style:none;outline-width:medium;overflow:visible;padding:0px 0px 0px 0px;page-break-after:auto;page-break-before:auto;pause-after:0;pause-before:0;position:static;table-layout:auto;text-decoration:none;top:auto;unicode-bidi:normal;width:auto;z-index:auto; } 
 .konaLayers .konaLayer { position: absolute; top:0px; left:0px; width: 313px; padding: 0px; visibility: hidden; text-align:left; overflow: hidden; } 
 .konaLayers .konaLayer a { font-weight: normal;text-decoration:none;border: 0px none transparent !important;background: transparent none !important;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px !important;text-transform: none !important;display:inline !important;font-variant:normal;top:0px; right:0px;bottom:0px;left:0px; } 
 .konaLayers .konaLayer a:link { font-weight: normal;text-decoration:none;border: 0px none transparent !important;background: transparent none !important;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px !important;text-transform: none !important;display:inline !important;font-variant:normal;top:0px; right:0px;bottom:0px;left:0px; } 
 .konaLayers .konaLayer a:hover { font-weight: normal;text-decoration:none;border: 0px none transparent !important;background: transparent none !important;margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px !important;text-transform: none !important;display:inline !important;font-variant:normal;top:0px; right:0px;bottom:0px;left:0px; } 
 .konaLayers .konaLayer b { font-size:inherit; } 
 a.CBL { cursor:default; } 
 a.CBL:link { cursor:default; } 
 a.CBL:hover { cursor:default; } 
 a.CBL:visited { cursor:default; } 
 .konaLayers .CBL .handleTd div { cursor:default; } 
 .konaLayers .konaPlate { cursor : pointer; } 
 .konaLayers .konaPlate .konaBox { background: url(http://kona.kontera.com/javascript/lib/imgs/top_box.gif) left top no-repeat;width: 313px; } 
 .konaLayers .konaPlate .konaBottomBox { width: 313px; height:45px; font-size: 3px; background: url(http://kona.kontera.com/javascript/lib/imgs/box_bottom.png) left top no-repeat; } 
 .konaLayers .konaPlate .konaBottomBox_Right { width: 313px; height:45px; font-size: 3px; background: url(http://kona.kontera.com/javascript/lib/imgs/box_bottom_right.png) left top no-repeat; } 
 .konaLayers .konaPlate .konaBottomBox_drag { width: 313px; height:20px; font-size: 3px; background: url(http://kona.kontera.com/javascript/lib/imgs/box_bottom_drag.png) top no-repeat; } 
 .konaLayers .handleTd { vertical-align: top; width: 180px; } 
 .konaLayers .handleTd div { cursor: move; padding: 0px 0px 0px 33px; font-size: 3px; } 
 .konaLayers .handleTd img { vertical-align:top; } 
 .konaLayers .frameBarCell_left { width:88px; vertical-align: top; padding: 0px 0px 0px 0px; } 
 .konaLayers .frameBarCell_right { width: 32px; vertical-align: top; padding-top: 0px; font-size: 5px; } 
 .konaLayers .frameBar { margin-left: 7px; margin-right: 6px; cursor:auto; width:300px; } 
 .konaLayers .konaDescDiv {  cursor: pointer; padding-top: 2px; } 
 .konaLayers .table02 { margin-left: 9px; font: normal 13px arial; width: 305px; } 
 .konaLayers .table03 { margin-left: 8px; font: normal 13px arial; width: 280px; table-layout: fixed; } 
 .konaLayers .table03_flv02 { margin: 0px 0px 0px 32px; width: 242px; font: normal 13px arial; table-layout: fixed; } 
 .konaLayers .konaLayerTitle { text-align:center; padding-right: 10px; } 
 .konaLayers .konaLayerRMTitle { text-align:left; padding-right: 10px; padding-left: 6px; } 
 .konaLayers .konaLayerTitleText  { font: bold 11px tahoma; color:#FFA200;; !important; text-decoration: underline;display:block; } 
 .konaLayers .konaLayerTitleText b { font-size : 11px; color: #FFA200; } 
 .konaLayers .konaLayerDesc { padding: 6px 7px 0px 0px; font: normal 11px verdana !important; color: BLACK; text-align: left; } 
 .konaLayers .konaLayerDesc b { font-size : 11px; color: BLACK; } 
 .konaLayers .konaLayerLinks td { padding-top: 8px; } 
 .konaLayers .konaLayerShopLinks td { padding-top: 1px; font-size: 9px; } 
 .konaLayers .site { padding-left: 8px; overflow:hidden; } 
 .konaLayers .site a { color: #666666 !important; font: normal 11px arial !important; text-decoration: underline !important; overflow:hidden; } 
 .konaLayers .site a:hover { color: #FFA200 !important; } 
 .konaLayers .buyNow { text-align: right; width:105px; } 
 .konaLayers .konaLayer img { border: 0px;display:inline; padding:0px; } 
 .konaLayers .imgBanner { padding: 6px 13px 0px 6px; vertical-align: top; width:51px; text-align: center; } 
 .konaLayers .imgShoppingBanner { padding: 5px 4px 0px 3px; vertical-align: top; width: 51px; text-align: center; } 
 .konaLayers .imgBanner_down { padding: 5px 13px 0px 13px; vertical-align: top; width:51px; text-align: center; } 
 .konaLayers .top_curve { width: 313px; height: 10px; padding:0px; margin:0px;vertical-align:bottom;background: url(http://kona.kontera.com/javascript/lib/imgs/top_curve.png) left top no-repeat; } 
 .konaLayers .drop_top_curve { width: 313px; height: 35px;vertical-align:bottom;font-size: 3px;background: url(http://kona.kontera.com/javascript/lib/imgs/drop_top_curve.png) top no-repeat; } 
 .konaLayers .drop_top_curve_right { width: 313px; height: 35px; font-size: 3px;vertical-align:bottom;background: url(http://kona.kontera.com/javascript/lib/imgs/drop_top_curve_right.png) top no-repeat; } 
 .konaLayers .konaSearchRow td { padding-top: 2px; } 
 .konaLayers .konaSearchTable { margin-left: 5px; font: normal 13px arial; } 
 .KonaBody { display:inline; } 
 .konaLayers .table02_flv { margin-left: 10px; margin-top: 3px; margin-bottom: -4px; } 
 .konaLayers .table02_flv02 { margin-left: 34px; width: 234px; margin-top: 3px; } 
 .konaLayers .table02_flv03 { margin-left: 6px;margin-top: 3px; } 
 .konaLayers .konaLayer_flvTD01 { padding: 6px 6px 0px 6px; } 
 .konaLayers .konaLayer_flvTD02 { padding: 5px 6px 0px 6px; } 
 .konaLayers .konaLayer_flvEmbed01 {  } 
 .konaLayers .konaLayer_flvEmbed02 { margin-bottom: -3px; } 
 .konaLayers .konaLayerDesc_nearFLV { font: normal 11px verdana !important; color: BLACK; text-align: left;vertical-align: top; padding: 11px 10px 0px 0px; } 
 .konaLayers .konaLayerDesc_underFLV { font: normal 11px verdana !important; color: BLACK; text-align: left;font: normal 11px/14px verdana !important; vertical-align: top; padding: 0px 0px 0px 6px; } 
 .konaLayers .konaLayerLearnMore { text-align:left; vertical-align: bottom; padding: 0px 0px 1px 6px; } 
 .konaLayers .konaLayerLearnMore02 { vertical-align: top; text-align:right;width: auto !important; padding: 4px 0px 0px 0px !important; } 
 .konaLayers .konaLayerLinks_underFLV td { padding-top: 0px; padding-bottom: 4px; line-height: 14px; } 
 .konaLayers .konaLayerLinks_underFLV02 td { padding-top: 4px; line-height: 14px; } 
 .konaLayers .konaBox_bottom { background: url(http://kona.kontera.com/javascript/lib/imgs/box_separator.gif) left top no-repeat; width: 313px; height: 10px; font-size: 1px; } 
 .konaLayers .konaBox02 { background: url(http://kona.kontera.com/javascript/lib/imgs/box.gif) left top no-repeat; width: 313px; padding-top: 7px; } 
 .konaLayers .konaLayer .konatabs_Search { margin: 0px 0px 0px 16px; width: 280px; padding: 0px; text-align: left; background: url(http://kona.kontera.com/javascript/lib/imgs/tabs_bg.gif) bottom repeat-x; } 
 .konaLayers .konaLayer .konatabs_Table td { padding-right: 4px; } 
 .konaLayers .konaLayer .konatabs_Table div { height: 18px; padding: 0px ; text-align: center; background: url(http://kona.kontera.com/javascript/lib/imgs/tab_right.gif) bottom right no-repeat; } 
 .konaLayers .konatabs_Table div span { display:block; height: 15px; padding: 3px 7px 0px 9px; text-align: center; background: url(http://kona.kontera.com/javascript/lib/imgs/tab_left.gif) bottom left no-repeat; color: #808080; font: normal 11px arial; cursor: pointer; } 
 .konaLayers .konaLayer .konatabs_Table div.selected { background: url(http://kona.kontera.com/javascript/lib/imgs/tab_selected_right.gif) bottom right no-repeat; cursor: default; } 
 .konaLayers .konatabs_Table div.selected span { background: url(http://kona.kontera.com/javascript/lib/imgs/tab_selected_left.gif) bottom left no-repeat; font: bold 11px arial; color: #96BF00; cursor: default; } 
 .konaLayers .konaSearch_Form { margin: 6px 0px 0px 15px; } 
 .konaLayers .konaSearch_Form input { font: normal 11px verdana; color: black; border: 1px solid #7F9DB9; margin-right: 3px;padding-left:2px; } 
 .konaLayers .konaSearch_Form .konaSearchName { font: normal 11px verdana; color: #96BF00; padding-right: 6px; } 
 .konaLayers .konaLayer div.konaSearch_Button { width: 63px; height: 18px; padding: 2px 0px 0px 6px; background: url(http://kona.kontera.com/javascript/lib/imgs/search_button.gif) left top no-repeat ; color: #808080; font: normal 11px arial; } 
 .konaLayers .konaLayer .konaBox02 td.konaHover *  { color: #96BF00; } 
 .konaLayers .konaFlashWrap { width: 320px; height: 288px;  } 
 .konaLayers .konaFlashDrag { position:absolute;width:198px;height:26px;background-color:#ffffff;opacity:0;filter:alpha(opacity=0);cursor:move; } 
 .konaLayers .konaFlashContent { width: 320px; height: 288px; } 
 .konaLayers #konaFlashBubble { width: 320px; height: 288px;  } 
 .konaLayers .konaBigFlashWrap { position:absolute;width:470px;height:395px; } 
 .konaLayers .konaBigFlashDrag { position:absolute;z-index:17;width:347px;height:24px;left:85px;top:5px;background-color:#ffffff;opacity:0;filter:alpha(opacity=0);cursor:move;  } 
 .konaLayers .konaBigFlashContent { position:absolute;left:0;top:0;z-index:12;width:470px;height:395px;  } 
 .searchTbContainer { width:295px; height:20px; border:0px solid red; padding:0 0 0 0; margin: 0 0 0 0; } 
 .searchTransTb { width:10px; height:20px; border:0px solid blue; margin:0; padding: 0; vertical-align:middle; } 
 .searchLogoTb { width:81px; height:20px ;vertical-align:middle;border:0px solid red; margin:0; padding: 0;  } 
 .searchInputTb { width:140px;  height:20px; vertical-align:middle; margin:0; padding: 0;  } 
 .searchButtonTb { width:63px;  height:20px; vertical-align:middle;border:0px solid red; margin:0; padding: 0;  } 
 .searchInputFieldTbDiv { width:133px; height:16px; position:relative; background-color: #fff; border:1px solid #939aa0; padding-left: 2px; margin:0; vertical-align:middle;  } 
 .searchInputFieldTb { font-size:12px; font-weight: normal; font-family:Tahoma, Arial, sans-serif; color:#000000;background-color: transparent; padding:0; margin:0 0 0px 0; } 
 .konaSdcLayerContainer { width: 300px;background-color:#FFFFFF;margin-left:7px;margin-top:4px; } 
 .konaSdcLayerTitle { width: 290px;color: #ffa200;font-size: 11px;font-weight: bold;font-family: Tahoma, Arial, sans-serif;text-decoration:underline;text-align: center;padding-bottom: 8px; } 
 .konaSdcLayerBlock { width: 300px;height: 100px;clear:both; } 
 .konaSdcLayerImg { padding-left: 10px;width: 100px;height: 100px;border: 0px solid green;float:left; } 
 .konaSdcLayerTable { position:relative;padding-left: 10px;padding-right: 10px;width: 170px;height: 100px;float:right;clear:right; } 
 .konaSdcLayerTableTb table  { position:relative;width: 170px; } 
 .konaSdcLayerText { width: 280px;color: #000000;font-size: 11px;font-weight: normal;font-family: Tahoma, Arial, sans-serif;text-decoration: none;text-align: left;padding-top: 8px;padding-left: 10px; } 
 .konaSdcLayerFooter { position:relative;width: 280px;color: #000000;text-align: left;padding-top: 8px;padding-left: 10px; } 
 .konaSdcLayerFooterTB { position:relative;width: 280px; } 
 .konaSdcItem .konaSdcItemTable { position:relative;height: 34px;width: 170px;background-color: #fff7ce;border-bottom: 1px solid #ffd990;color: #000000;font-size: 11px;font-weight: normal;font-family: Tahoma, Arial, sans-serif;text-decoration: none; } 
 .konaSdcItemTableHover { position:relative; background:url(http://kona.kontera.com/javascript/lib/imgs/hilite_bg.gif) top right no-repeat;padding-left: 4px;height: 34px;width: 170px;border-bottom: 1px solid #ffd990;color: #000000;font-size: 11px;font-weight: normal;font-family: Tahoma, Arial, sans-serif;text-decoration: none; } 
 .konaSdcItemTable td, konaSdcItemTableHover td { position:relative;padding-left: 4px; height:auto; } 
 .konaSdcstorName { color:#0000FF;text-align: left; padding-left: 4px;font-size:11px;font-weight:normal;font-family:Arial,helvetica,sans-serif; } 
 .konaSdcstorName:hover { text-decoration:underline; } 
 .konaSdcPrice { color:#1e3b53;text-decoration:underline;font-weight: bold;text-align:left;font-size:12px;font-family:Arial,helvetica,sans-serif; } 
 .konaSdcStoreTd1 { width: 105px; text-align: left; } 
 .konaSdcStoreTd2 { width: 45px; text-align: left; } 
 .konaSdcBuy { color:#1e3b53;text-decoration:underline;font-weight: normal;font-size: 10px;text-align: left; } 
 .konaLayers .konaInfocomSearchTD .konaLineInputTD { position:relative; } 
 .konaInfocomTableContainer { margin-left:21px; } 
 .konaInfocomSearchTD { background: url(http://kona.kontera.com/javascript/lib/imgs/konaInfocom_search_area_trans.gif); width: 270px; height:46px; } 
 .konaInfocomSearchTable { margin-top: 10px; margin-left:13px; width:244px; } 
 .konaInfocomSearchField { width:163px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FFF; border:1px inset #ccc; padding: 1px 0px; } 
 .konaInfocomInputContainer { position:relative; width: 163px; text-align: left; overflow: hidden; } 
 .konaLayers .konaFlashWrap { position:relative; } 
 .konaLayers .konaExpandFlashWrap { position:relative; } 
 .konaLayers .konaFlashDrag { z-index:100;position:absolute;width:198px;height:26px;background-color:#ffffff;opacity:0;filter:alpha(opacity=0.0);cursor:move;top:0px; } 
 .konaLayers .konaExpandFlashContent {  } 
 .konaLayers .konaExpandFlashIframe { /*background:yellow;*/z-index:9999;position:absolute; } 
 .konaLayers .konaWebnaryGradientTD .konaLineInputTD { position:relative; width: 200px } 
 .konaWebnaryGradientTD { background:url(http://kona.kontera.com/javascript/lib/imgs/konaWebnaryGrad.gif) repeat-x; height:39px; width:300px; } 
 .konaWebnaryTable { width: 300px; height:112px; margin-left:7px; margin-top:3px } 
 .konaWebnaryHeadTD { width: 300px; height:51px; } 
 .konaWebnarySubTD { width: 300px; height:22px; } 
 .konaWebnarySearch { width:280px; height:23px; margin: 3px 0 0 10px; } 
 .konaWebnaryInput { width: 200px; font: 12px Verdana, Arial, Helvetica, sans-serif; background-color:#FFF;color: black; border:1px inset #ccc; padding: 1px 0px; } 
 .konaWebnarySubmit { margin-left:5px; } 
 .konaWebnaryInputContainer { position:relative; width: 200px; text-align: left; overflow: hidden; } 
 .konaLayers .konaFDGradientTD .konaLineInputTD { position:relative; width: 193px } 
 .konaFDGradientTD { background:url(http://kona.kontera.com/javascript/lib/imgs/konaFDbottom.gif); height:39px; width:300px; } 
 .konaFDTable { width: 300px; height:112px; } 
 .konaFDHeadTD { width: 300px; height:55px; } 
 .konaFDSubTD { width: 300px; height:20px; } 
 .konaFDSearch { width:280px; height:23px; margin: 3px 0 0 10px; } 
 .konaFDInput { width: 193px; font: 12px Verdana, Arial, Helvetica, sans-serif; background-color:#FFF;color: black;border:1px inset #ccc; padding: 1px 0px; } 
 .konaFDSubmit { margin-left:5px; } 
 .konaFDInputContainer { position:relative; width: 193px; text-align: left; overflow: hidden; } 
 .konaYahooShoppingTable { width: 288px; height:125px; border: none; margin-left: 12px; margin-top: 5px; background-image:url(http://kona.kontera.com/javascript/lib/imgs/konaYahooSbgWhite.gif); } 
 .konaYahooShoppingTable2 { width: 288px; border: none; margin-left: 12px; } 
 .konaYahooShoppingHeader { height: 31px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-bottom: 0px; vertical-align:middle; text-align:center; } 
 .konaLayers .konaLayer a.konaYahooShoppingTitle { font-size:11px; font-weight:bold; color: #000000; text-decoration:underline; cursor:default; } 
 .konaYahooShoppingContentTable { border: none; padding:0; } 
 .konaYahooShoppingImageTd { padding-top:6px; padding-right:0px; padding-left:12px; padding-bottom:0px; vertical-align:top; } 
 .konaLayers .konaLayer .konaYahooShoppingImg { border:solid 1px; border-color: #808080; } 
 .konaYahooShoppingPrice { padding-bottom:5px; padding-right: 7px; } 
 .konrYahooShoppingFont { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color: #000000; } 
 .konaYahooShoppingText { width: 177px; padding-left: 5px } 
 .konaYahooShoppingDescriptionTable { height: 80px; } 
 .konaYahooShoppingDescriptionTd { vertical-align: top; } 
 .konaYahooShoppingDescription { margin:0; padding: 3px 3px 7px 2px; text-align:left; vertical-align:top; line-height:1.5; } 
 .konaYahooSecondTable { background-image:url(http://kona.kontera.com/javascript/lib/imgs/konaYahooSbgMiddle2.gif); width:100%; border: none; } 
 .konaYahooSecondTableLinkTD { padding-left:15px; vertical-align:bottom; } 
 .konaLayers .konaLayer a.konrYahooLink1 { color:#0170b3; font-size:10px; text-decoration: underline; font-family: verdana,sans-serif; } 
 .konaYahooSecondTableButtonTD { float:right; vertical-align:bottom; } 
 .konaYahooShoppingBuyNowImg { margin-right: 5px; float:right; border:none; } 
 .konaYahooShoppingBottomTd { padding:0px; vertical-align:top; } 
 .konaYahooShoppingBottomImg { padding:0; margin:0; } 
 .konaYahooShoppingPoweredImg { margin:5px 0 0 0; padding:0; } 
 .konaYahooSponsored_bckgr { background:url(http://kona.kontera.com/javascript/lib/imgs/konaYSponsored_fon_w_text.gif); height:113px; width:300px; margin-left:7px; margin-top:3px } 
 .konaYahooSponsored_table { margin-top: 72px; margin-left: 17px; } 
 .konaYahooSponsored_input { width: 182px; font: Verdana, Arial, Helvetica, sans-serif; margin-top: 0px; background-color:#FFF;color: black;border:1px inset #ccc; padding: 1px 0px; } 
 .konaYahooSponsored_inputContainor { position:relative; width: 182px; text-align: left; overflow: hidden; } 
 .konaYahooSponsored_td { padding:2px; } </style><span id="konasapn0"><script src="index_files/KonaGet.txt" type="text/javascript"></script><script src="index_files/ContentLink.htm" type="text/javascript"></script></span>
<!-- Kontera ContentLink�  -->	

<script src="index_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
//_uacct = "UA-85864-2";
_uacct = "UA-2042963-1";
urchinTracker();
</script>
<div class="konaLayers" id="konaLayers"></div></body></html>